<template>
    <TnxbsvForm class="tnxbsv-query-form" :model="params" inline>
        <slot></slot>
        <slot name="actions">
            <div class="tnxbsv-query-form-actions">
                <TnxbsvButton variant="outline-primary" icon="bi bi-search" @click="query" v-if="query">
                    {{ queryText }}
                </TnxbsvButton>
                <TnxbsvButton @click="toReset" v-if="reset">
                    {{ resetText }}
                </TnxbsvButton>
            </div>
        </slot>
    </TnxbsvForm>
</template>

<script>
import TnxbsvForm from '../form/Form.vue';
import TnxbsvButton from '../button/Button.vue';

export default {
    name: 'TnxbsvQueryForm',
    components: {TnxbsvForm, TnxbsvButton},
    props: {
        params: {
            type: Object,
            default: () => ({}),
        },
        query: Function,
        queryText: {
            type: String,
            default: '查询',
        },
        reset: [Boolean, Function],
        resetText: {
            type: String,
            default: '重置',
        },
    },
    data() {
        return {};
    },
    methods: {
        toReset() {
            if (typeof this.reset === 'function') {
                this.reset();
            } else if (this.reset) {
                let pageSize = this.params.pageSize;
                let pageNo = this.params.pageNo;
                for (let key in this.params) {
                    delete this.params[key];
                }
                if (pageSize) {
                    this.params.pageSize = pageSize;
                }
                if (pageNo) {
                    this.params.pageNo = 1;
                }
                if (this.query) {
                    this.query();
                }
            }
        }
    }
}
</script>

<style>
.tnxbsv-query-form-actions {
    display: flex;
    height: fit-content;
}
</style>
